<!DOCTYPE HTML>
<html>
  <head>
    <title>SIMILE Widgets | Exhibit | Examples | Flags of the World</title>
    <meta http-equiv="content-type" content="text/html;charset=UTF-8" />
    <link rel='stylesheet' href='http://www.simile-widgets.org/styles/common.css' type='text/css' />
    
    <link href="data.js" type="application/json" rel="exhibit/data" />
    
    <!-- Replace the URL here with http://api.simile-widgets.org/exhibit/2.2.0/exhibit-api.js -->
    <script src="../api/exhibit-api.js"></script>
    
    <!-- Replace the URL here with http://api.simile-widgets.org/exhibit/latest/extensions/map/map-extension.js -->
    <link rel="exhibit-extension" href="../api/extensions/map/map-extension.js" data-ex-apikey="AIzaSyCDO3EXWKJms5T38db48czFJZDunhYIzn8" />
    <!-- Replace the above apiKey with your own (this one will eventually stop working) -->

    <style>
        div.map-lens { padding: 1em; }
        a { color: #533421; }
        div.flag-container {
            width:      200px;
            height:     180px;
        }
        .flag-container img {
            border:     1px solid #ccc;
        }
        #main td {
        padding: 20px
        }
    </style>
  </head>

  <body>
    <ul id="path">
      <li><a href="/">SIMILE Widgets</a></li>
      <li><a href="/exhibit/">Exhibit</a></li>
      <li><a href="..">Demos</a></li>
      <li><span>Examples: Flags of the World</span></li>
    </ul>
    <table id="main" style="width:100%;border-spacing:0px">
    <tr style="vertical-align:top">
        <td style="width:20%; background: #DE8D57">
            <h1>Flags of the World</h1>
            <p>Adapted from <a href="http://ecmanaut.blogspot.com/">Johan Sundström</a>'s
                <a href="http://ecmanaut.googlecode.com/svn/trunk/exhibits/flags.html">flags of the world exhibit</a>,
                with images from <a href="http://www.famfamfam.com/lab/icons/flags/">famfamfam.com</a>.
                Here is the <a href="data.json" target="_blank">Exhibit JSON data file</a>.
            </p>
            <p>Using <a href="http://simile.mit.edu/exhibit/">Exhibit</a>, you can make this map
                with just the few simple files you see in <a href="./">this directory</a>.
                Could you have built the same map with as little effort using anything else?
            </p>
            <div style="text-align:center" data-ex-role="logo" data-ex-color="BlanchedAlmond"></div>
        </td>
        <td>
            <div data-ex-role="view"
                data-ex-view-class="Map"
                data-ex-latlng=".latlng"
                data-ex-icon="concat('images/', .code, '.png')"
                data-ex-icon-it="none"
                data-ex-shape="square"
                data-ex-shape-width="30"
                data-ex-shape-height="25"
                data-ex-map-height="600"
                >
                <div data-ex-role="lens" style="display: none;" class="map-lens">
                    <div class="flag-container">
                        <img data-ex-src-subcontent="http://upload.wikimedia.org/wikipedia/commons/thumb/9/9a/Flag_of_{{.label}}.svg/200px-Flag_of_{{.label}}.svg.png"
                        alt="wikipedia flag image"/>
                    </div>
                    <div><b data-ex-content=".label"></b> [<span data-ex-content=".code"></span>]</div>
                    <div>(Image from Wikipedia)</div>
                </div>
            </div>
        </td>
    </tr></table>
  </body>
</html>
